<template>
  <div class="page">
    <u-navbar>
      <view class="slot-wrap">
        <u-search placeholder="订单编号" v-model="searchForm.orderSn"  @search="load"  @custom="load"></u-search>
      </view>
    </u-navbar>
    <div class="drop-list">
      <div class="drop-list-tab">
        <u-tabs :list="list" active-color="#333" :is-scroll="false" :current="current" @change="changeTabs"></u-tabs>
      </div>
      <div class="drop-list-config" @click="handleClickScreen">
        <div>
          筛选
        </div>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="global-list" v-if="orderListData.length != 0">
      <div class="global-item" @click="handleClickOrder(item)" v-for="(item,index) in orderListData" :key="index">
        <!-- 订单来源，订单号，订单状态 -->
        <div class="flex global-top-col">
          <div class="global-sn">{{item.sn}}</div>
          <div class="global-orderStatus">{{item.orderStatus | orderStatusList}}</div>
        </div>
        <!-- 商品信息 -->
        <div class="flex goods-item" v-for="(goods,current) in item.orderItems" :key="current">
          <div>
            <u-image width="150" height="150" :src="goods.image" mode="" />
          </div>
          <div class="wes-2 goods-name">{{goods.name}}</div>
          <!-- 价格 -->
          <div class="flex goods-right-col">
            <div class="goods-price">￥{{goods.goodsPrice | unitPrice}}</div>
            <div>x <span>{{goods.num}}</span></div>
          </div>
        </div>

        <div class="global-bottom-col flex">
          <div class="global-createTime">{{item.createTime}}</div>

          <div class="global-clientType">{{item.clientType | orderClientType}}</div>
        </div>
        <div class="goods-follow-price">
          合计（含快递）<span>￥{{item.flowPrice| unitPrice}}</span>
        </div>

      </div>
    </div>
    <u-empty text="暂无更多订单" v-else mode="order"></u-empty>

    <!-- 返回顶部 -->
    <u-back-top :scroll-top="scrollTop"></u-back-top>

    <popup memberName orderStatus date ref="popup" @callback="screened" />

  </div>
</template>

<script>
import popup from "@/components/m-popup/index";
import { getOrderList } from "@/api/order";
export default {
  components: {
    popup,
  },
  data() {
    return {
      list: [
        {
          name: "商品订单",
        },
        {
          name: "虚拟订单",
        },
      ],
      current: 0, //tab索引
      scrollTop: 0, //返回到顶部
      // 搜索框初始化对象
      searchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "", // 默认排序字段
        order: "", // 默认排序方式
        startDate: "", // 起始时间
        endDate: "", // 终止时间
        orderSn: "",
        buyerName: "",
        orderStatus: "",
        orderType: "NORMAL",
      },
      orderListData: [], // 订单列表
    };
  },
  watch: {
    current(val) {
      this.orderListData = [];
      this.init();
    },
  },
  onShow() {
     this.orderListData = [];
    this.searchForm.pageNumber = 1;
    this.init();
  },
  onReachBottom() {
    this.searchForm.pageNumber++;
    this.init();
  },
  onLoad() {},
  mounted() {},
  methods: {
    // 点击tab
    changeTabs(index) {
      this.current = index;
    },
    // 点击筛选
    handleClickScreen() {
      this.$refs.popup.open();
    },
    load(){
      this.searchForm.pageNumber = 1
      this.orderListData = []
      this.init()
    },
    // 筛选完成回调
    screened(val) {
      
      /**
       * 1.循环出相同的字段进行赋值
       * 2.将不同的字段进行赋值
       */
      for (let key in val) { 
         this.searchForm[key] != undefined ? this.searchForm[key] = val[key] : ""
      }
    
      val.date[0] ? this.searchForm.startDate = val.date[0] : "" 
      val.date[1] ? this.searchForm.endDate = val.date[1] : "" 
      val.memberName ? this.searchForm.buyerName = val.memberName  : ""
      this.load()
      
    },
    // 初始化数据
    async init() {
      uni.showLoading({
        title: "加载中",
      });
      this.current == 0
        ? (this.searchForm.orderType = "NORMAL")
        : (this.searchForm.orderType = "VIRTUAL");
      //商品订单
      let res = await getOrderList(this.searchForm);
      if (res.data.success) {
        this.orderListData.push(...res.data.result.records);
      }

      uni.hideLoading();
    },

    // 点击订单
    handleClickOrder(val) {
      uni.navigateTo({
        url: `/pages/order/detail?sn=${val.sn}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import '@/components/global.scss';





</style>